<template>
  <!--  菜单结构
  <el-menu> 菜单合：包括菜单头和其所有的子菜单
    <el-submenu> 子菜单
      <template>菜单头
        --图标--随便写
        <span slot="title">导航一</span>
      </template>
      <el-menu-item index="a">子菜单1</el-menu-item>   a!=b 保持index中的唯一性
      <el-menu-item index="b">子菜单2</el-menu-item>
      ...
    </el-submenu>
  </el-menu>
  -->
  <el-aside class="asideView" :width="asideWidth" v-model="msg">
    <h2 @click="msg++">{{ asideTitle }}</h2>
    <el-menu
        class="asideView-menu"
        text-color="#8a979e"
        active-text-color="#eee"
        background-color="#263238"
        @select="onSelect"
        :default-active="active"
        :collapse="isCollapse"
    >

      <el-menu-item index="home" class="top">
        <svg-icon :class="{iconElastic:isCollapse}" icon-class="icon-main"
                  className="icon-aside-menu"></svg-icon>
        <span ref="titleTextHome" slot="title">主页</span>
      </el-menu-item>

      <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
        <template slot="title">
          <svg-icon :class="{ iconElastic:isCollapse }" :icon-class="'icon-'+item.icon"
                    className="icon-aside-menu"></svg-icon>
          <span ref="titleText" slot="title">{{ item.name }}</span>
        </template>
        <el-menu-item :index="subItem.url+''" v-for="subItem in item.subMenus" :key="subItem.id">
          <svg-icon :icon-class="'icon-'+subItem.icon" className="icon-aside-menu"></svg-icon>
          <span ref="titleText" slot="title">{{ subItem.name }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
import {mapState, mapGetters} from "vuex";

export default {
  name: 'aside-view',
  props: {},
  components: {},
  data: function () {
    return {
      msg: 5,
      num: 0,
      menuList: undefined,
      active: 'home',

    }
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem("menus") || '[]');

  },

  watch: {
    //监听点击后vuex的数据中的isCollapse的改变
    isCollapse: {//当isCollapse改变了执行下面的handler函数
      handler(newIsCollapse) {
        // console.log('newVal:' + newIsCollapse)
        // console.log('oldVal:' + oldIsCollapse)
        let iconsRight = document.querySelectorAll('.el-submenu__icon-arrow');
        let iconsLeft = document.querySelectorAll('.svg-icon.icon-aside-menu');
        //收缩的时候图标样式随之收缩
        iconsLeft.forEach(icon=> {
          // 为每个元素设置样式
          if (newIsCollapse) {
            //收缩后的最终样式
            icon.style.scale = 'var(--scale-num)';
            icon.style.color = 'var(--background-color)';
          } else {
            icon.style.scale = '1';
            icon.style.color = '#7f7f7f';
          }
        })
        if (newIsCollapse) {
          //解决在每次菜单收缩的时候的最右边图标瞬间位移的问题
          iconsRight.forEach(icon => {
              icon.style.display = 'none';
              //终于tm解决了bug
          })
          //解决在每次菜单收缩的时候的文字被切割的问题
          this.$refs.titleTextHome.style.display = 'none';//主页的标题标签节点
          this.$refs.titleText.forEach(item=>{//其他除了主页外的所有菜单的标题标签节点
            item.style.display = 'none';
          })

        }
      },
      immediate: false,//默认是false,watch在首次绑定amount时是否立即执行
      deep: false//默认是false，在监听对象变化时，一般情况下无法监听对象内部属性的变化,deep为true表示深度监听
    },
  },
  computed: {
    //映射
    ...mapGetters(['asideWidth', 'asideTitle']),
    ...mapState(['isCollapse',]),

  },
  methods: {

    onSelect(index) {
      this.$router.push(index.replace('/', '-'))
    },

  }
}
</script>

<style scoped lang="less">
.asideView {
  .activeMenu() {
    background-color: rgba(100, 100, 100, 0.2) !important;
  }
  transition: 0.5s !important;

  &::-webkit-scrollbar { //隐藏滚动条
    display: none;
  }

  height: 100vh; //高度拉满
  //background: linear-gradient(#fff 10%, #263238 10%); //为了让侧边栏标题部分的左上角留出空白
  background: var(--menu-background-color);
  //用于遮挡顶部
  &::before {
    content: '';
    width: 250px;
    height: 11px;
    background: #fff;
    display: block; // 确保伪元素是一个块级元素
    position: absolute;
    top: 0;
    left: 0;
  }

  h2 {
    font-size: 20px;
    line-height: 50px;
    background-color: var(--background-color);
    color: #fff;
    text-align: center;
    position: sticky; //吸顶定位
    top: 0;
    z-index: 2;
    border-radius: 10px 0 0; //左上角留白
    white-space: nowrap; //文字不换行

  }

  //新添的类名添加样式
  //操作组件A-->调用组件A的方法-->调用vuex的全局方法-->操作vuex的全局数据s-->
  //通过影响s来影响组件B-->根据s的变化给组件B添加动态类名c-->给c添加样式
  .is-none {
    display: none;
  }

  //菜单栏收缩后图标的最终样式
  .iconElastic {
    scale: var(--scale-num);
    color: var(--background-color);
  }

  //菜单栏处于收缩情况下的所有菜单
  //.asideView-menu.el-menu--collapse.el-menu {
  ////主页菜单的最大盒子
  //.el-menu-item.top.is-active{
  //  ::v-deep .el-tooltip{
  //    .svg-icon.icon-aside-menu.icon-elastic{
  //      //图标
  //      #icon-icon-main{
  //      }
  //    }
  //  }
  //}
  ////其余菜单
  //.el-submenu{
  //  ::v-deep .el-submenu__title:last-child{
  //  }
  //  ::v-deep .el-submenu__title{
  //  }
  //}
  //}


  //所有菜单栏集合（默认展开情况下）
  .asideView-menu.el-menu {
    user-select: none;
    border: none !important;
    box-sizing: border-box;



    //主页菜单栏默认
    .el-menu-item.top {
      background-color: var(--menu-background-color) !important;

      &:hover {
        .activeMenu();
      }
    }

    //主页菜单栏点击
    .el-menu-item.top.is-active {
      .activeMenu()
    }

    //剩余菜单(默认情况下)
    .el-submenu {
      //头标签
      ::v-deep .el-submenu__title {

        &:hover {
          .activeMenu();
        }
      }
    }

    //解释如下：
    //当菜单(.el-submenu)展开(.is-opened)的情况下，
    //其中的后代元素(.el-menu-item)在被点击(.is-active)的时候
    //选择菜单(.el-submenu)的子代元素(.el-submenu__title)，给其添加样式
    ::v-deep .el-submenu:has(.el-menu-item.is-active) > .el-submenu__title {
      .activeMenu();
      color: #eee !important;
    }

    //剩余菜单(展开情况下)
    .el-submenu.is-opened {
      .el-menu.el-menu--inline {
        //默认情况下
        .el-menu-item {
          background-color: #202b30 !important;


          &:hover {
            .activeMenu();
          }
        }

        //点击情况下
        .el-menu-item.is-active {
          .activeMenu()
        }
      }
    }

  }

}
</style>

